<template>
  <div class="blog-right-list" v-loading="loading">
    <h2>文章分类</h2>
    <RightList :list="list" @select="handleSelect" v-slot="scope">
      <div>
        <span style="margin-right: 1em">{{scope.item.name}}</span>
        <span style="font-size: 12px">{{scope.item.articleCount+'篇'}}</span>
      </div>
    </RightList>
  </div>
</template>

<script>
import RightList from "@/views/Blog/components/RightList.vue";
import getData from "@/mixins/getData";
import {getBlogTypes} from "@/api/blog/blog";
export default {
  name: "BlogRightList",
  components: {RightList},
  mixins: [getData([])],
  computed: {
    categoryId() {
      return +this.$route.params.categoryId || -1
    },
    limit() {
      return +this.$route.query.limit || 10
    },
    list() {
      const articleCount = this.data.reduce((a, b) => a+b.articleCount, 0)
      const list = [{id: -1, name: '全部',articleCount }, ...this.data]
      return list.map(item => ({
        ...item,
        isSelected: item.id === this.categoryId
      }))
    }
  },
  methods: {
    async getData() {
      return await getBlogTypes()
    },
    handleSelect(item) {
      const query = {
        page: 1,
        limit: this.limit
      }
      if (item.id === -1) {
        this.$router.push({
          name: 'Blog',
          query,
        })
      } else {
        this.$router.push({
          name: 'CategoryBlog',
          query,
          params: {
            categoryId: item.id
          }
        })
      }
    }
  }
}
</script>

<style scoped lang="less">
@import "~@/styles/var.less";
.blog-right-list{
  width: 300px;
  height: 100%;
  padding: 20px;
  overflow-y: auto;
  &>h2{
    font-size: 20px;
    font-weight: bold;
    padding: 10px;
    color: @words;
  }
  &>.right-list-container{
    color: @lightWords;
  }

}
ul{
  list-style: none;
}
</style>